<!DOCTYPE html>
<!-- saved from url=(0025)http://e.xiwed.cn/up.html -->
<html lang="zh-CN">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>图片上传</title>
		<link rel="stylesheet" href="cropper.min.css">
		<style>
			body{
				position: absolute;
				min-height: 100%;
				min-width: 100%;
				margin: 0;
				padding: 0;
			}
			.box {
				 height: 450px;
				width: 400px;
				position: relative;
				float: left;
				border: 1px solid red;
			}
			
			.box input {
				position: absolute;
				display: block;
				height: 400px;
				width: 400px;
				opacity: 0;
				top: 0;
				left: 0;
				z-index: 5;
			}
			
			.box img.upload {
				display: block;
				margin: auto;
				transform: translateY(120px);
			}
			.box img.result{
				display: block;
				width: 100%;
				outline: none;
				border: none;
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}
			.box .url{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				z-index: 1000;
			}
			
			.modal {
				display: none;
				top: 0;
				left: 0;
				position: fixed;
				height: 100%;
				width: 100%;
				background-color: rgba(0, 0, 0, 0.3);
				z-index: 100;
			}
			
			.modal .container {
				height: 100%;
				width: 100%; 
				margin: auto;
				background: #FFF;
			}
			
			.modal .container .btns {
				text-align: center;
				height: 40px;
				background: #333;
			}
			
			.modal .container .btns img {
				margin-right: 10px;
				height: 30px;
				margin-top: 5px;
				margin-left: 5px;
			}
			
			.modal .container .img-container {
				margin: auto;
			}
			
			.modal .container .img-container img {
				 
				max-width: 100%;
			}
			.loadding{
				display: none;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 999;
				background: rgba(0,0,0,0.5);
			}
		</style>
	</head>

	<body>
		<div class="box">
			<input type="file" name="file" data-width="400" data-height="400" onchange="loadImg(event)" accept="image/*" />
			<img src="plus.png" class="upload" />
			<img class="result" />
			<div class="url" style="display: none;"></div>
		</div>
		<!--<div class="box" style="width: 450px;">
			<input type="file" style="width: 450px;" name="file" data-width="450" data-height="400" onchange="loadImg(event)" accept="image/*" />
			<img src="plus.png" class="upload" />
			<img class="result" />
			<div class="url" style="display: none;"></div>
		</div>-->
		<!--<div class="box" style="width: 200px;height: 130px;">
			<input type="file" style="width: 200px;height: 100px;" name="file" data-width="200" data-height="100" onchange="loadImg(event)" accept="image/*" />
			<img src="plus.png" class="upload" style="transform: translateY(20px);" />
			<img class="result" />
			<div class="url" style="display: none;"></div>
		</div>-->



		<div class="modal" id="modal">
			<div class="container">
				<div class="btns">
					<img src="small.png" alt="" onclick="small()" />
					<img src="big.png" alt="" onclick="big()" />
					<img src="rotate.png" alt="" onclick="rotate()" />
					<img src="ok.png" alt="" onclick="upload()" />
					<img src="close.png" onclick="closeModal()" alt="" />
				</div>
				<div class="img-container"  >
					<img id="image" />
				</div>
			</div>
		</div>
		
		<div class="loadding" >
			<div style="justify-content: center;align-items: center;display: flex;height: 100%;width: 100%;">
				<img src="loading.gif" alt="" />
			</div>
		</div>

		<script src="jquery.min.js"></script>
		<script src="cropper.min.js"></script>
		<script src="main.js"></script>

	</body>

</html>